<template>
	<cl-crud ref="crud" @load="onLoad">
		<cl-pagefull @resize="onResize">
			<template slot="head">
				<el-row type="flex">
					<cl-filter-group v-model="search">
						<cl-filter label="关键字">
							<el-input
								v-model="search.keyword"
								placeholder="请输入事业部名称"
								clearable
								style="width: 200px"
								@change="refresh()"
							/>
						</cl-filter>
					</cl-filter-group>
					<cl-flex1 />
					<div>
						<el-button
							icon="el-icon-plus"
							v-if="userInfo.biz_id == 1"
							type="primary"
							@click="add"
						>
							新增事业部
						</el-button>
					</div>
				</el-row>
			</template>

			<!-- 数据表格 -->
			<cl-table v-bind="table">
				<cl-empty slot="empty" />
				<template #column-status="{ scope: { row } }">
					<el-tag :type="filterType(row.biz_open_status, 'type')">
						{{ row.biz_open_status | filterType }}
					</el-tag>
				</template>
				<template #column-opt="{ scope: { row } }">
					<div class="flex flex-align-start">
						<el-button type="primary" @click="openBizManage(row)">
							分公司管理
						</el-button>
						<el-button @click="edit(row)"> 修改 </el-button>
						<el-button @click="remove(row)"> 删除 </el-button>
					</div>
				</template>
			</cl-table>
		</cl-pagefull>
		<business-form ref="form" @confirm="refresh" />
		<company-drawer ref="company" />
	</cl-crud>
</template>

<script>
import BusinessForm from "./components/business/business-form";
// 分公司管理
import CompanyDrawer from "./components/business/company-drawer";
const statusMap = {
	0: { type: "warning", text: "待审核" },
	1: { type: "success", text: "已开通" },
	2: { type: "danger", text: "未通过" }
};
const filterType = (val, key = "text") => {
	// console.log(val);
	return statusMap[val] ? statusMap[val][key] : "未知";
};
export default {
	name: "CrmPersonnelBusiness",
	components: {
		BusinessForm,
		CompanyDrawer
	},
	filters: {
		filterType
	},
	data() {
		return {
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				props: {
					maxHeight: 500
				},
				columns: [
					{ type: "index", label: "#", align: "center", width: 50, fixed: true },
					{
						label: "事业部名称",
						prop: "biz_name",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "经营类目",
						prop: "tname",
						minWidth: 150,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "联系人",
						prop: "biz_contact",
						width: 120,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "联系人电话", prop: "biz_mobile", width: 120 },
					{
						label: "地址",
						prop: "address",
						minWidth: 180,
						align: "left",
						showOverflowTooltip: true
					},
					{ label: "状态", prop: "status", width: 90 },
					{ label: "操作", prop: "opt", width: 250, fixed: "right" }
				]
			},
			search: {
				keyword: ""
			}
		};
	},
	methods: {
		filterType,
		onResize(h) {
			this.table.props.maxHeight = h;
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.public)
				.set("dict", {
					api: {
						page: "business"
					}
				})
				.done();
			app.refresh(this.search);
		},
		// crud刷新
		refresh(reset = true) {
			let params = { ...this.search };
			if (reset) {
				params.page = 1;
			}
			this.$refs.crud.refresh(params);
		},
		openBizManage(row) {
			this.$refs.company.open(row);
		},
		add() {
			this.$refs.form.open();
		},
		// 编辑
		edit(row) {
			this.$refs.form.open(true, row);
		},
		// 删除
		remove({ biz_id }) {
			this.confirm()
				.then(async () => {
					await this.$service.business.remove({ biz_id });
					this.$message.success("操作成功");
					this.refresh(false);
				})
				.catch(() => {});
		}
	}
};
</script>
